<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        /* 相对定位是元素在移动位置的时候，是相对于他原来的位置来说的（自恋型） */
        /* 特点： */
        /* 1：他是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
        2：原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待他（不脱标，继续保留原来的位置） */
        /* 因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。 */
        .box1 {
            /* 相对定位语法 */
            position: relative;
            /* 边偏移 */
            top: 100px;
            left: 100px;

            width: 200px;
            height: 200px;   
            background-color: pink;    
     }
     .box2 { 
         width: 200px;
         height: 200px;
         background-color: deeppink;
         
     }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    
</body>
</html>